<template>
  <div class="homePage app-container">
    <div class="dataView">
      <header class="echartView">
        <EchartView v-model:echartView="components_echartView"></EchartView>
      </header>
      <div class="table">
        <Horizontal v-model:horizontal="components_horizontal" />
        <Vertical v-model:vertical="components_vertical" />
      </div>
    </div>

    <Teleport to="body" v-if="noticeList.length && showUpgrade">
      <div class="fullWidth" @click.stop="closeFull">
        <div class="loading-box" ref="loadingBox">
          <div
            @click.stop="closeModal"
            class="absolute top-0px right--30px cursor-pointer"
          >
            <el-icon size="30" color="#aaa"><CircleClose /></el-icon>
          </div>
          <img :src="updateImg" alt="" />
          <div class="title">更新公告</div>
          <el-scrollbar height="290px" class="loading-content">
            <div class="text-16px">{{ noticeList[0].noticeTitle }}</div>
            <div
              class="text-16px mt-15px"
              v-html="noticeList[0].noticeContent"
            ></div>
          </el-scrollbar>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup name="homePage">
import Cookies from 'js-cookie'
import { getCurrentInstance } from 'vue'
import useUserStore from '@/store/modules/user'
import Vertical from './vertical'
import Horizontal from './horizontal'
import EchartView from './echartView'
import { listNotice } from '@/api/system/upgradeNotice'

import updateImg from '@/assets/images/updateTIp.png'
const { proxy, appContext } = getCurrentInstance()
const userStore = useUserStore()
const data = reactive({
  homeSettings: '',
  userId: ''
})

// onMounted(() => {
//   // console.log(socket, 'socket')

// })

// 组件  默认展示组件
const components_horizontal = shallowRef([
  appContext.components['toDoList'],
  appContext.components['notice']
]) // 通知公告
const components_vertical = shallowRef([
  appContext.components['salesRanking'],
  appContext.components['Upgrade']
]) // 销售排名
const components_echartView = shallowRef([
  appContext.components['pendingWork'],
  appContext.components['pendingTask'],
  appContext.components['pendingNotice'],
  appContext.components['pendingProcess'],
  appContext.components['pendingTest'] // 预留
  // appContext.components['paymentCompletion']
]) // 数据展示

const { userId, homeSettings } = toRefs(data)

function init() {
  userId.value = userStore.userInfo.userId
  if (userStore.homeSetting) {
    homeSettings.value = JSON.parse(userStore.homeSetting)
    const { horizontal, vertical, echartView } = homeSettings.value
    if (!horizontal.length && !vertical.length && !echartView.length) {
      // homeSettings存在,但选中组件是全为空数组
      homeSettings.value = {
        echartView: [
          { key: '待处理工单', value: 'PendingWork' },
          { key: '待处理任务', value: 'PendingTask' },
          { key: '待阅读公告', value: 'PendingNotice' },
          { key: '待审批流程', value: 'PendingProcess' }
        ],
        horizontal: [
          { key: '待办事宜', value: 'ToDoList' },
          { key: '通知公告', value: 'Notice' }
        ],
        vertical: [{ key: '销售排名', value: 'SalesRanking' }]
      }
    }
  } else {
    // 默认展示
    homeSettings.value = {
      echartView: [
        { key: '待处理工单', value: 'PendingWork' },
        { key: '待处理任务', value: 'PendingTask' },
        { key: '待阅读公告', value: 'PendingNotice' },
        { key: '待审批流程', value: 'PendingProcess' },
        { key: '预留', value: 'pendingTest' }
      ],
      horizontal: [
        { key: '待办事宜', value: 'ToDoList' },
        { key: '通知公告', value: 'Notice' }
      ],
      vertical: [
        { key: '销售排名', value: 'SalesRanking' },
        { key: '升级公告', value: 'Upgrade' }
      ]
    }
  }
}
init()

watch(homeSettings, changeSettings, {
  deep: true,
  immediate: true
})

// 监听homeSettings，改变组件、弹窗选中值
function changeSettings(newVal, oldVal) {
  if (newVal) {
    console.log(newVal, '触发监听')
    const { horizontal, vertical, echartView } = homeSettings.value
    // 弹窗选中值
    // horizontalArraySelect.value = horizontal
    // verticalArraySelect.value = vertical
    // echartViewSelect.value = echartView
    // 动态加载组件
    components_horizontal.value = horizontal.map(v => {
      if (v.value) {
        return appContext.components[
          v.value[0].toLowerCase() + v.value.slice(1)
        ]
      }
    })
    components_vertical.value = vertical.map(v => {
      if (v.value) {
        return appContext.components[
          v.value[0].toLowerCase() + v.value.slice(1)
        ]
      }
    })
    components_echartView.value = echartView.map(v => {
      if (v.value) {
        return appContext.components[
          v.value[0].toLowerCase() + v.value.slice(1)
        ]
      }
    })
  }
}
// 控制选择弹窗
// const changeContent = ref(false)
// function editView() {
//   changeContent.value = true
// }

// 关闭弹窗前回调
// function close(done) {
//   cancel()
//   done()
// }

// 弹窗选择取消
// function cancel() {
//   changeContent.value = false
// }

// 弹窗选择完成
// async function finish() {
//   if (proxy.$refs.echartView.exposeSort().length > 5) {
//     proxy.$modal.msgWarning('数据展示模块最多选中五个组件，请重新选择')
//     return
//   }
//   let homeSetting
//   proxy.$modal.confirm('请确认您当前进行的修改操作').then(() => {
//     homeSetting = JSON.stringify({
//       horizontal: proxy.$refs.horizontal.exposeSort().length
//         ? proxy.$refs.horizontal.exposeSort()
//         : [],
//       vertical: proxy.$refs.vertical.exposeSort().length
//         ? proxy.$refs.vertical.exposeSort()
//         : [],
//       echartView: proxy.$refs.echartView.exposeSort().length
//         ? proxy.$refs.echartView.exposeSort()
//         : []
//     })
//     setHomesetting({
//       userId: userId.value,
//       homeSetting
//     }).then(res => {
//       proxy.$modal.msgSuccess('修改成功')
//       homeSettings.value = JSON.parse(homeSetting)
//     })
//   })
// }

/*** 2024/4/48  start 升级公告*/
const noticeList = ref([]) //升级公告的第一条数据
upgradeInit()
async function upgradeInit() {
  // 获取升级公告数据
  const noticeRES = await listNotice({
    pageNum: 1,
    pageSize: 1
  })
  noticeList.value = noticeRES.rows
  showUpgrade.value = true
  if (localStorage.getItem('upgradeId') >= noticeList.value[0].noticeId) {
    showUpgrade.value = false
  }
}

// 是否显示更新弹窗
const showUpgrade = ref(false)
function closeFull(e) {
  if (proxy.$refs.loadingBox.contains(e.target)) {
    return
  }
  closeModal()
}

function closeModal() {
  localStorage.setItem('upgradeId', noticeList.value[0].noticeId)
  showUpgrade.value = false
}
/*** 2024/4/48  end 升级公告*/
</script>

<style scoped lang="scss">
.homePage {
  // height: 100%;
  height: calc(100vh - 110px);
  width: 100%;
  overflow: auto;
  img {
    width: 100%;
  }
  .editBtn {
    @apply flex items-center h-35px;
    flex-direction: row-reverse;
    width: 100%;
  }
  .dataView {
    @apply w-full h-full;
    .echartView {
      // height: 240px;
      // height: 160px;
      width: 100%;
      // border: 1px solid black;
    }
    .table {
      display: flex;
    }
  }

  :deep(th.el-table__cell) {
    background-color: white !important;
    font-size: 15px;
  }
  :deep(.el-dialog__body) {
    height: 500px;
  }
  .commonWeb {
    height: 150px;
    margin-top: 20px;
    background-color: white;
    box-shadow: 0 0 3px 0 #ccc;
  }
}

.fullWidth {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 99999998;
  background-color: rgba(208, 200, 200, 0.3);
  user-select: none;
  ::v-deep(.is-vertical) {
    display: block !important;
  }
}
.loading-box {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 450px;
  height: 300px;
  border-radius: 10px;
  z-index: 99999999;
  // background-color: antiquewhite;
  img {
    width: 100%;
    height: auto;
  }
  .title {
    position: absolute;
    top: 80px;
    left: 50px;
    color: white;
    font-size: 30px;
  }
  .loading-content {
    padding: 0 30px;
    width: 100%;
    // min-height: 300px;
    // max-height: 400px;
    background-color: white;
    transform: translateY(-20px);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}
</style>
